<template>
	<view class="receipt">
		<view class="ticket">
			<view class="invoice-state">{{ invoiceDetail.state.text }}</view>
			<view class="ticket-title">
				<view class="title-text">{{ invoiceDetail.invoice_type.text }}</view>
				<view class="border-outer"></view>
				<view class="border-inner"></view>
			</view>
			<view class="bill">
				<view class="invoice">
					<view class="invoice-prev">交款人/单位:</view>
					<view class="invoice-after">{{ invoiceDetail.invoice_title }}</view>
				</view>
				<view class="line"></view>
				<view class="invoice">
					<view class="invoice-prev">票据性质:</view>
					<view class="invoice-after">{{ invoiceDetail.invoice_nature.text }}</view>
				</view>
				<view class="line"></view>
				<view class="invoice">
					<view class="invoice-prev">票据号码:</view>
					<view class="invoice-after">{{ invoiceDetail.invoice_no || '' }}</view>
				</view>
				<view class="line"></view>
				<!-- <view class="invoice">
					<view class="invoice-prev">校验码:</view>
					<view class="invoice-after">{{invoiceDetail}}</view>
				</view>
				<view class="line"></view> -->
				<view class="invoice">
					<view class="invoice-prev">开票日期:</view>
					<view class="invoice-after">{{invoiceDetail.insert_time }}</view>
				</view>
				<view class="line"></view>
				<view class="invoice">
					<view class="invoice-prev">开票单位:</view>
					<view class="invoice-after">{{invoiceDetail.invoicing_party }}</view>
				</view>
				<view class="line"></view>
				<view class="invoice-total">
					<view class="invoice-prev">合计金额:</view>
					<view class="invoice-after">￥{{ invoiceDetail.total_money }}</view>
				</view>
				<view class="invoice-total">
					<view class="invoice-prev">备注:</view>
					<view class="invoice-des">{{ invoiceDetail.remarks }}</view>
				</view>
			</view>
		</view>
		<view class="invoice-btn">
			<button class="btn" @click="saveReceipt">保存发票</button>
		</view>
	</view>
</template>

<script>
	import LineBorder from '@/pages/components/line.vue'
	export default {
		components: { LineBorder },
		data() {
			return {
				invoiceDetail: { }
			}
		},
		onLoad(detail) {
			
			if (detail) {
				const param = JSON.parse(decodeURIComponent(detail.param))
				this.invoiceDetail = Object.assign({}, param)
				console.log('detail', this.invoiceDetail)
			}
		},
		methods: {
			saveReceipt() {
				if(this.invoiceDetail.attachment) {
					uni.showLoading({
						title: '请稍后...'
					})
					console.log('jhhhhhh')
					uni.downloadFile({
					  url: this.invoiceDetail.attachment.config.domain + this.invoiceDetail.attachment.filepath, // 文件下载地址
					  success: response => {
							console.log('reess', response)
							uni.hideLoading()
					    if (response.statusCode == 200) {
								console.log('hhughghhh')
								uni.openDocument({
									filePath: response.tempFilePath
								})
								// uni.shareFileMessage({
								// 	filePath: response.tempFilePath,
								// 	// fileName: this.invoiceDetail.attachment.fileName,
								// 	success: res => {
								// 		console.log('res', res)
								// 	}
								// })
					    }
					  }
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receipt {
		margin: 0 36rpx;
		.ticket {
			background-image: $receipt-bg;
			background-size: contain;
			height: 100%;
			font-size: #{$text-size};
			padding-bottom: 20rpx;
			position: relative;
			.invoice-state {
				position: absolute;
				top: 15%;
				left: 70%;
				transform: rotate(-30deg);
				border: 1px solid #D31212;
				border-radius: 10rpx;
				padding: 0rpx 10rpx;
				color: #D31212;
			}
			.ticket-title {
				color: #CC2B2B;  // 圈颜色：D31212
				text-align: center;
				position: relative;
				padding-top: 80rpx;
				.title-text {
				}
				.border-outer {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%);
					width: 140rpx;
					height: 80rpx;
					border: 2px solid #D31212;
					border-radius: 50%;
				}
				.border-inner {
					position: absolute;
					top: 60%;
					left: 50%;
					transform: translate(-50%);
					width: 120rpx;
					height: 60rpx;
					border: 1px solid #D31212;
					border-radius: 50%;
				}
			}
			.bill {
				margin-top: 60rpx;
			}
			.invoice-total {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				margin: 20rpx 0;
				color: #{$one-title-color};
				.invoice-after {
					color: #{$main-color};
				}
				.invoice-des {
					color: #{$two-title-color};
				}
			}
			.invoice {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				.invoice-prev {
					color: #{$one-title-color};		
				}
				.invoice-after {
					color: #{$two-title-color};
				}
			}
		}
	}
	.invoice-btn {
		margin-top: 120rpx;
		.btn {
			background: #{$main-color};
			color: #fff;
			border-radius: 40rpx;
		}
	}
	.line {
		border-bottom: 1px solid #999;
		margin: 20rpx;
	}
</style>